@charset "utf-8";
@import "_iconfont";
*{
    margin:0;
    padding:0;
}
@function r($px){
    @return ($px/40)*1rem;
}
@function px($px){
    @return ($px/2)*1px;
}
#web{
    width:r(750);
    height:100%;
    position:relative;
}
header{
    width:100%;
    height:px(105);
    overflow: hidden;
    .back_btn{
        width:r(120);
        height:100%;
        margin-left:r(23);
        input{
            width:px(123);
            height:px(57);
            line-height: px(57);
            text-align: center;
            margin-top:px(24);
            border:1px solid #ff9344;
            border-radius: px(20);
            background: #fff;
        }
    }
    p{
        text-align:center;
        line-height:px(105);
        font-size:16px;
    }
    .selectBar{
        width:px(62);
        height:px(56);
        margin-right:r(18);
        margin-top:r(15);
        img{
            display: block;
            width:100%;
        }
        
    }
}
.section{
    width:100%;
    position: absolute;
    top:px(105);
    bottom:px(150);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .detail_banner{
        width:r(710);
        height:r(260);
        margin:auto;
        img{
            display: block;
            width:100%;
        }
    }
    .detail_buy{
        width:r(710);
        height:r(120);
        margin:auto;
        p{
            line-height: r(120);
            color:#ff9344;
            font-size: 40px;
        }
        input{
            width:r(113);
            height:r(60);
            line-height: r(60);
            text-align: center;
            color:#fff;
            background:#ff9344;
            font-size:14px;
            border-radius: px(30);
            margin:r(37) r(18) 0 0;
        }
    }
    .detail_comment{
        width:r(710);
        height:r(62);
        margin:auto;
        p{
            font-size:15x;
            span{
                color:#ff9344;
            }
        }
        .comment_c{
            padding-left:r(62);
            background: url("../images/found_06.png")no-repeat;
            background-size: r(62) 100%;
        }
        .comment_p{
            color:#666;
        }
    }
    .detail_user{
        width:r(710);
        height:r(67);
        margin:r(21) auto 0;
        background:#ff9344;
        p{
            font-size:18px;
            line-height: r(67);
            color:#fff;
        }
        .user_p{
            padding-left:r(12);
        }
        .user_c{
            font-size:30px;
            line-height: r(67);
        }
    }
    .detail_sushi{
        width:r(710);
        height:r(176);
        margin:r(10) auto;
        .sushi_img{
            width:r(176);
            height:r(176);
            img{
                display: block;
                width:100%;
            }
        }
        .sushi_content{
            width:r(377);
            height:r(176);
            h4{
                width:r(355);
                height:r(54);
                line-height: r(54);
                padding-left:r(20);
                font-size:16px;
                font-weight: 500;
            }
            .sushi_g{
                width:r(357);
                height:r(40);
                padding-left:r(22);
                .sushi_five{
                    width:r(179);
                    height:r(40);
                    display: inline-block;
                    background: url("../images/found_06.png");
                    background-size:r(37) r(40); 
                    vertical-align: top;
                }
                span{
                    display: inline-block;
                    width:r(158);
                    height:r(36);
                    line-height: r(36);
                    font-size:16px;
                    vertical-align: top;
                }
            }
            .sushi_p{
                width:r(357);
                height:r(42);
                line-height: r(42);
                font-size:14px;
                padding-left:r(20);
                color:#666;
            }
            a{
                display: block;
                width:r(357);
                height:r(42);
                line-height:r(42);
                padding-left:r(20);
                font-size:14px;
                color:#ff9344;
            }
        }
        .sushi_btn{
            width:r(128);
            height:r(176);
            input{
                width:r(112);
                height:r(59);
                line-height:r(59);
                text-align: center;
                background: #ff9344;
                color:#fff;
                border-radius: px(20);
                margin:r(67) r(20) 0 0;
            }
        }
    }
}
// 脚部样式
footer{
    width:100%;
    height:px(150);
    position: absolute;
    bottom:0;
    li{
        width:25%;
        float:left;
        i{
            width:100%;
            height:px(100);
            line-height: px(100);
            display: block;
            text-align: center;
        }
        .iconfont{
            font-size:px(50);
            color:#fe9241;
        }
        p{
            text-align: center;
            font-size:14px;
            font-family: "微软雅黑";
            color:#000;
        }
    }
}


// 媒体查询
@media screen and (min-width:320px) and (max-width:374px){
    .section{
        .detail_buy{
            p{
                font-size:30px;
            }
         }
         .detail_sushi{
             .sushi_content{
                 h4{
                     font-size:14px;
                 }
             }
         }
         .detail_user{
             p{
                 font-size:14px;
             }
         }
         .detail_comment{
             p{
                 font-size:15px;
             }
         }
    }
    
}
@media screen and (min-width:600px){
    header{
        height:px(150);
        p{
            line-height:px(150);
            font-size:18px;
        }
        .back_btn{
            input{
                width:px(140);
                height:px(67);
                line-height: px(67);
                margin-top:px(40);
            }
        } 
        .selectBar{
            width:px(70);
            height:px(64);
            margin-right:r(18);
            margin-top:r(20);
            img{
                display: block;
                width:100%;
            }
            
        }
    }
    .section{
        top:px(150);
        .detail_buy{
            input{
                font-size:18px;
            }
        }
        .detail_user{
            p{
                font-size:20px;
            }
        }
        .detail_sushi{
            .sushi_content{
                h4{
                    font-size:18px;
                }
                .sushi_p{
                    font-size:16px;
                }
                a{
                    font-size:16px;
                }
            }
            .sushi_btn{
                input{
                   font-size:20px;
                }
            }
        }
    }
    footer{
        li{
            p{
                font-size:16px;
            }
        }
    }
    
}
